<template>
    <div ref="multipleDiv" :key="sindex">
        <template v-for="(file,index) in localFiles">
            <div :key="file.id || file.localId" class="multipleUpload">
                <file-upload :key="'upload' + index" :accept="accept" :file="file" :index="index" :task="file.task"
                    size="mini" @unload-success="(id)=>{
            editSuccess(id,index,file)
          }" @remove-file="(indexc)=>{
            removeFile(index)
          }" />
            </div>
        </template>
        <el-upload action="" :accept="accept" class="addBtn" multiple :http-request="distributedTasks"
            :show-file-list="false">
            <el-button size="mini" type="primary">选择附件</el-button>
        </el-upload>
    </div>
</template>

<script>
    import fileUpload from '@/components/common/fileUpload.vue';
    export default {
        components: {fileUpload},
        props: {
            accept: {
                default: 'image/*'
            },
            files: {
                default: function() {
                    return []
                }
            }
        },
        data() {
            return {
                sindex: 0,
                localFiles: []
            }
        },
        watch: {},
        created() {
            this.localFiles = JSON.parse(JSON.stringify(this.files))
        },
        mounted() {
            this.initSortMultipleDiv()
        },
        methods: {
            distributedTasks(file) {
                this.localFiles.push({
                    task: file,
                    localId: 1 + Math.random()
                })
            },
            removeFile(index) {
                this.localFiles.splice(index, 1)
                const data = this.localFiles.filter(i => {
                    return !i.localId
                })
                this.$emit('files-change', data)
            },
            editSuccess(id, index, file) {
                this.localFiles.splice(index, 1, id)
                const data = this.localFiles.filter(i => {
                    return !i.localId
                })
                this.$emit('files-change', data)
            },
            initSortMultipleDiv() { // tbody
                var el = this.$refs.multipleDiv
                var sortViewTable = new Sortable(el, {
                    animation: 150,
                    filter: '.addBtn',
                    swap: false,
                    onEnd: (e) => {
                        const newIndex = e.newIndex
                        const oldIndex = e.oldIndex
                        this.localFiles.splice(newIndex, 0, this.localFiles.splice(oldIndex, 1)[0])
                        const data = this.localFiles.filter(i => {
                            return !i.localId
                        })
                        this.$emit('files-change', data)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .multipleUpload {
        display: inline-block;
        margin-right: 10px;
    }
</style>